<template>
	<view style="margin-top: 30rpx;margin-bottom: 5px;">
		<div class="textarea-container">
			<textarea :style="'height:'+textAreaMinHeight" style="line-height: 34px;" placeholder="有问题尽管问我"
				@linechange="inputHeightChange" always-embed="true" adjust-position="true" cursor-spacing="30" maxlength="500"
				type="text" v-model="inputValue" confirm-type="send" @confirm="sendMessge"></textarea>
			<uni-icons class="icon fas fa-search" @tap="sendMessge" type="paperplane-filled" size="24"
				color="#757575"></uni-icons>
		</div>
	</view>
</template>

<script>
	export default {
		name: "chat-input",
		data() {
			return {
				inputValue: '',
				textAreaMinHeight: '34px',
			}
		},
		methods: {
			inputHeightChange: function(e) {
				this.textAreaMinHeight = (e.detail.height + 18) + 'px';
			},
			sendMessge: function(event) {
				var that = this;
				if (that.inputValue.trim() == '') {
					that.inputValue = '';
				} else {
					console.log("chatInput", "send", that.inputValue)
					//点击发送按钮时，通知父组件用户输入的内容
					this.$emit('send-message', {
						type: 'text',
						content: that.inputValue
					});
					that.inputValue = '';
				}
			}
		}
	}
</script>

<style>
	@import "../common/icon.css";

	.footer {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 3px;
		background-color: #fafafa;
		align-items: center;
	}

	.footer-left {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 3px;
		margin-right: 3px;
	}

	.footer-right {
		width: 60px;
		height: 70px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #1482D1;
	}

	.footer-center {
		width: 100%;
		min-height: 70px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.textarea-container {
		position: relative;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 3px;
		padding-right: 10px;
	}

	.textarea-container textarea {
		width: 100%;
		height: 38px;
		min-height: 38px;
		background: #fff;
		border: solid 1px #ddd;
		padding-left: 5px;
		padding-top: 8px;
		padding-bottom: 8px;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 20px;
		font-size: 15px;

		box-sizing: border-box;
		padding-right: 50px;
		margin-right: 5px;
		margin-left: 5px;
		margin-bottom: 1px;
		line-height: 10px;
	}

	.textarea-container .icon {
		position: absolute;
		top: 50%;
		right: 16px;
		transform: translateY(-50%);
		color: #ccc;
		cursor: pointer;
		margin-right: 10px;
		z-index: 10;
	}

	.textarea-container .icon:hover {
		color: #333;
	}
</style>